import React, { Component } from 'react';
import styled from 'styled-components';
import Toggle from './Toggle';
import Task from './Task';
import RobotMetrics from './RobotMetrics';
import PointCloudData from './PointCloudData';
import Camera from './Camera';
import Simulation from './Simulation';
import ActivityLog from './ActivityLog';

const AppWrapper = styled.div`
  > .pure-g {
    margin-bottom: 24px;

    [class *= "pure-u"] {
      padding: 0 6px;
    }
  }
`;

class App extends Component {
  render() {
    return (
      <AppWrapper>
        <div className="pure-g" style={{ height: 240 }}>
          <div className="pure-u-1-6">
            <Toggle />
          </div>
          <div className="pure-u-7-24">
            <Task />
          </div>
          <div className="pure-u-13-24">
            <RobotMetrics />
          </div>
        </div>
        <div className="pure-g" style={{ height: 320 }}>
          <div className="pure-u-3-8">
            <PointCloudData />
          </div>
          <div className="pure-u-1-4">
            <Camera />
          </div>
          <div className="pure-u-3-8">
            <Simulation />
          </div>
        </div>
        <div className="pure-g">
          <div className="pure-u-1">
            <ActivityLog />
          </div>
        </div>
      </AppWrapper>
    );
  }
}

export default App;
